<template>
  <!-- 城市列表 -->
  <div v-show="showCity" class="c-pl24 c-pr60 c-w100 wrapper">
    <div class="scroller" ref="scroller">
      <div v-for="(item,index) in cities" :key="index" :ref="item.name">
        <div class="c-fc-gray c-fs28 title">{{item.name}}</div>
        <div class="c-fs24 bb-ed item-list" v-for="(innerItem,index1) in cities[index].cities" :key="index1" @click="handleCityClick(innerItem.name)">
          <div class="item">{{innerItem.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    cities: Object,
    letter: {
      type: String,
      default: 'A'
    },
    showCity: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      cityScroller: document.querySelector('.scroller'),
      cityWrapper: document.querySelector('.wrapper'),
      anchorArr: []
    }
  },
  computed: {
  },
  watch: {
    // 监听 Alphabet 中传过来的letter，如有变化，则滚动区域自动滚动到对应元素上
    letter() {
      if (this.letter) {
        this.cityWrapper = document.querySelector('.wrapper');
        this.cityScroller = document.querySelector('.scroller');
        let maxScrollY = this.cityWrapper.clientHeight - this.cityScroller.clientHeight;
        let letterY = '';
        let anchorArr = this.anchorArr;
        for (let i in anchorArr) {
          if (this.letter == anchorArr[i].letter) {
            letterY = anchorArr[i].yValue
          }
        }
        let y = Math.min(0, Math.max(maxScrollY, -letterY));
        if (typeof y !== 'undefined') {
          this.scroll.scrollTo(0, y);
        }
      }
    }
  },
  methods: {
    handleCityClick(city) {
      this.$emit('chooseCity', city)
    },
  },
  mounted() {
    this.anchorArr = [];
    let y = 0;
    var titleHeight = 30
    var itemHeight = 40
    let that = this;
    this.cities.forEach(function (e) {
      let name = e.name.substr(0, 1)
      let len = e.cities.length
      let obj = {
        letter: name,
        yValue: Math.abs(Math.round(y))
      }
      that.anchorArr.push(obj)
      y -= titleHeight + len * itemHeight
    })

    let wrapper = document.querySelector('.wrapper');
    this.scroll = new Bscroll(wrapper, {
      click: true,
      probeType: 3,
    })

    let anchorArr = that.anchorArr;
    this.scroll.on('scroll', (pos) => {
      let scrollY = Math.abs(Math.round(pos.y));
      for (let i in anchorArr) {
        // if (scrollY >= anchorArr[i].yValue && scrollY < anchorArr[i + 1].yValue) {
        if ((anchorArr[i] && anchorArr[i * 1 + 1]) && scrollY >= anchorArr[i].yValue && scrollY < anchorArr[i * 1 + 1].yValue) {
          this.letter = anchorArr[i].letter;
          this.$emit('change', this.letter)
        }
      }
    })

    // let scroller = this.$refs.scroller;
    // scroller.addEventListener('scroll', this.windowScrollFunction); //添加滚动监听
  },
}
</script>

<style scoped>
.title {
  height: 30px;
  line-height: 40px;
  font-size: 14px;
}
.item-list {
  height: 40px;
  line-height: 40px;
}
.item {
  line-height: 40px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.wrapper {
  height: 100%;
}
</style>